<template>
	<view>
		<tarbar :current="3"></tarbar>
		<view class="container">
			<view class="containerTitle">
				<view class="setup">
					<text class="iconfont icon-set" @click="navTo('/pages/MyInfo/setUp')"></text>
				</view>
				<view class="avatar">
					<u-avatar :src="userInfo.u.avatar" size="120" @click="toZoomImage"></u-avatar>
					<view class="avatarItem" v-if="userInfo.u.nickname">
						<text>{{userInfo.u.nickname}}</text>
						<text>生日:{{userInfo.u.birthday}}</text>
					</view>
					<text v-else @click="navTo('/pages/user/login/login')">请先登录</text>
				</view>
				<view class="pic">
					<image :src="userInfo.u.avatar" mode="aspectFill"></image>
				</view>
			</view>
			<view class="options">
				<view class="optionsItem" @click="navTo('/pages/order/orderList/orderDetail', 0)">
					<view class="iconfont icon-quanbudingdan"></view>
					<view>全部订单</view>
				</view>
				<view class="optionsItem" @click="navTo('/pages/order/orderList/orderDetail',1)">
					<view class="iconfont icon-daifukuan"></view>
					<view>待付款</view>
				</view>
				<view class="optionsItem" @click="navTo('/pages/order/orderList/orderDetail',2)">
					<view class="iconfont icon-daifahuo"></view>
					<view>待发货</view>
				</view>
				<view class="optionsItem" @click="navTo('/pages/order/orderList/orderDetail',3)">
					<view class="iconfont icon-daishouhuo"></view>
					<view>待收货</view>
				</view>
				<view class="optionsItem" @click="navTo('/pages/order/orderList/orderDetail',6)">
					<view class="iconfont icon-trues"></view>
					<view>已完成</view>
				</view>
			</view>
			<view class="containerContent">
				<view class="containerContentItem">
					<view class="iconfont icon-collection icon"></view>
					<view class="it" @click="navTo('/pages/collectionList/collectionList')">
						<text>我的收藏</text>
						<text class="iconfont icon-xiangyoujiantou"></text>
					</view>
				</view>
				<view class="containerContentItem">
					<view class="iconfont icon-shouye9 icon"></view>
					<view class="it" @click="navTo('/pages/deliveryAddress/deliveryAddress')">
						<text>地址管理</text>
						<text class="iconfont icon-xiangyoujiantou"></text>
					</view>
				</view>
				<view class="containerContentItem" @click="navTo('/pages/aboutUs/aboutUs')">
					<view class="iconfont icon-guanyuwomen icon"></view>
					<view class="it">
						<text>关于我们</text>
						<text class="iconfont icon-xiangyoujiantou"></text>
					</view>
				</view>
				<view class="containerContentItem">
					<view class="iconfont icon-lianxiwomen icon"></view>
					<view class="it">
						<text>联系我们</text>
						<text class="iconfont icon-xiangyoujiantou"></text>
					</view>
				</view>
			</view>
		</view>
		<ZoomImage :imageSrcs="userInfo?.u?.avatar?.split(',')" v-model:flag="flag"></ZoomImage>
	</view>
</template>

<script setup>
	import {
		onShow,
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	import {
		userStore
	} from '../../stores/userInfo/userInfo.js'
	import {
		reactive,
		watch,
		nextTick,
		ref
	} from 'vue'
	import {
		getToken
	} from '../../utils/localStoreToken.js'

	import ZoomImage from '@/components/ZoomImage/index.vue'
	let user = userStore()
	let userInfo = reactive({
		u: {}
	})
	// 底部tab栏
	import tarbar from '@/components/tarbar/tarbar.vue'

	let flag = ref(true)
	//去到放大图片
	function toZoomImage() {
		flag.value = false
	}

	// 监听数据变化
	watch(() => user, () => {
		userInfo.u = user.userInfo
	}, {
		immediate: true,
		deep: true
	})

	// 获取userInfo
	async function getUserInfo() {
		const token = getToken()
		const user = userStore()
		try {
			const res = await user.getUserInfo({
				token
			})
			userInfo.u = res.userInfo
		} catch (err) {
			return 'ok'
		}
	}

	// 跳转
	function navTo(url, status) {
		if (status || status === 0) {
			uni.navigateTo({
				url: url + '?status=' + status
			})
		} else {
			uni.navigateTo({
				url
			})
		}

	}
	onLoad(() => {
		userInfo.u = user.userInfo
	})

	// 页面每次显示
	onShow(() => {
		uni.hideTabBar({
			animation: false
		})
	})
</script>

<style lang="scss" scoped>
.container {
		background-color: #f5f5f5;
		min-height: calc(100vh - 100rpx);
		padding-bottom: 100rpx;
		padding-top: var(--status-bar-height);
		.containerTitle {
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 300rpx;
			position: relative;
			padding: 20rpx;
			z-index: 10;
			color: #fff;
			.setup{
				display: flex;
				justify-content: flex-end;
				.iconfont{
					font-size: 30rpx;
				}
			}
			.avatar{
				display: flex;
				align-items: center;
				.avatarItem{
					line-height: 50rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 15rpx;
				}
			}
			.pic{
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				overflow: hidden;
				background-color: #fff;
				z-index: -1;
				image{
					width: 100%;
					height: 100%;
					filter: blur(20rpx);
					transform: scale(2);
					opacity: 0.5;
				}
			}
		}
	
	.options {
			background-color: #fff;
			border-radius: 10rpx;
			position: relative;
			top: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin:0 10px;
			transform: translateY(-60rpx);
			z-index: 50;
			.optionsItem {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 30rpx;
				font-size: 20rpx;
				line-height: 50rpx;
			}
			
			.iconfont {
				color: #fdd100;
				font-size: 45rpx;
			}
		}

		.containerContent {
			margin:0 20rpx;
			background-color: #fff;
			padding: 30rpx 20rpx;
			border-radius: 20rpx;

			.containerContentItem {
				display: flex;
				align-items: baseline;
				margin-bottom: 30rpx;

				&:last-child {
					margin-bottom: 0;
				}

				&:last-child .it {
					border-bottom: none;
					padding-bottom: 0;
				}
			}

			.icon {
				width: 100rpx;
				font-size: 40rpx;
				text-align: center;
				color: #000;
			}

			.it {
				flex: 1;
				display: flex;
				font-size: 35rpx;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #eee;
				padding-bottom: 30rpx;

				.iconfont {
					font-size: 40rpx;
					color: #ccc;
				}
			}
		}
	}
</style>
